<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5测试 - 物理实验</title>

</head>
<body>
	<canvas id="canvas"
		style="border: 1px solid #aaa;display: block;margin: 0 auto;">
		浏览器不支持canvas
	</canvas>
	
	<script type="text/javascript">
	var WINDOW_WIDTH = 1024;
	var WINDOW_HEIGHT = 768;
	
	//小球（起始x,起始y,半径，加速度，x轴起始速度，y轴起始速度，颜色）
	var ball = {x:20,y:200,r:20,g:1,vx:20,vy:0,color:"#005588"};
	window.onload = function(){
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext("2d");
		
		canvas.width = WINDOW_WIDTH;
	    canvas.height = WINDOW_HEIGHT;
		
		setInterval(
	        function(){
	            render( context );
	            update();
	        }
	        ,
	        20
	    );
	}
	function render( cxt ){
	    cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
	    
	    cxt.fillStyle = ball.color;
	    cxt.beginPath();
	    cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
	    cxt.closePath();
	    
	    cxt.fill();
	}
	function update(){
		//下落
		ball.x += ball.vx;//x = vx*t
        ball.y += ball.vy;//y = vy*t
        ball.vy += ball.g;//vy = g*t
        
        //下边碰撞
        if(ball.y >= 768 -ball.r){
        	ball.y = 768 -ball.r
        	ball.vy = -ball.vy*0.9//摩擦系数
        }
     	//右边碰撞
        if(ball.x >= 1024 -ball.r){
        	ball.x = 1024 -ball.r
        	ball.vx = -ball.vx*0.5
        }
     	//左边碰撞
        if(ball.x <= ball.r){
        	ball.x = ball.r
        	ball.vx = -ball.vx*0.5
        }
	}


	</script>
</body>
</html>